'use client'

import { useState, useEffect } from 'react'
import { BookOpen, Search, User, Settings, Moon, Sun } from 'lucide-react'
import { useTheme } from 'next-themes'
import Link from 'next/link'

export default function HomePage() {
  const { theme, setTheme } = useTheme()
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) return null

  return (
    <div className="min-h-screen bg-background">
      {/* 导航栏 */}
      <nav className="border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center space-x-8">
              <Link href="/" className="flex items-center space-x-2">
                <BookOpen className="h-8 w-8 text-primary" />
                <span className="text-xl font-bold">漫画阅读</span>
              </Link>
              <div className="hidden md:flex space-x-6">
                <Link href="/" className="text-foreground hover:text-primary transition-colors">
                  首页
                </Link>
                <Link href="/categories" className="text-foreground hover:text-primary transition-colors">
                  分类
                </Link>
                <Link href="/rankings" className="text-foreground hover:text-primary transition-colors">
                  排行榜
                </Link>
              </div>
            </div>
            
            <div className="flex items-center space-x-4">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <input
                  type="text"
                  placeholder="搜索漫画..."
                  className="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                />
              </div>
              
              <button
                onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
                className="p-2 rounded-lg hover:bg-accent transition-colors"
              >
                {theme === 'dark' ? (
                  <Sun className="h-5 w-5" />
                ) : (
                  <Moon className="h-5 w-5" />
                )}
              </button>
              
              <Link href="/login" className="flex items-center space-x-1 text-foreground hover:text-primary transition-colors">
                <User className="h-5 w-5" />
                <span>登录</span>
              </Link>
              
              <Link href="/settings" className="p-2 rounded-lg hover:bg-accent transition-colors">
                <Settings className="h-5 w-5" />
              </Link>
            </div>
          </div>
        </div>
      </nav>

      {/* 主要内容 */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* 英雄区域 */}
        <div className="text-center py-12">
          <h1 className="text-4xl font-bold tracking-tight sm:text-6xl mb-4">
            发现精彩漫画世界
          </h1>
          <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
            支持多源爬取的漫画阅读系统，为您提供最全面的漫画资源
          </p>
          <div className="flex justify-center space-x-4">
            <Link
              href="/register"
              className="bg-primary text-primary-foreground px-6 py-3 rounded-lg font-medium hover:bg-primary/90 transition-colors"
            >
              立即开始
            </Link>
            <Link
              href="/categories"
              className="border border-input bg-background px-6 py-3 rounded-lg font-medium hover:bg-accent transition-colors"
            >
              浏览漫画
            </Link>
          </div>
        </div>

        {/* 热门推荐 */}
        <section className="py-12">
          <h2 className="text-2xl font-bold mb-6">热门推荐</h2>
          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
            {[1, 2, 3, 4, 5, 6].map((i) => (
              <div key={i} className="group cursor-pointer">
                <div className="aspect-[3/4] bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden">
                  <div className="w-full h-full bg-gradient-to-br from-primary/20 to-primary/10" />
                </div>
                <h3 className="mt-2 text-sm font-medium truncate">漫画标题 {i}</h3>
                <p className="text-xs text-muted-foreground">最新话</p>
              </div>
            ))}
          </div>
        </section>

        {/* 最近更新 */}
        <section className="py-12">
          <h2 className="text-2xl font-bold mb-6">最近更新</h2>
          <div className="space-y-4">
            {[1, 2, 3, 4, 5].map((i) => (
              <div key={i} className="flex items-center space-x-4 p-4 border rounded-lg hover:bg-accent/50 transition-colors cursor-pointer">
                <div className="w-16 h-20 bg-gray-200 dark:bg-gray-700 rounded overflow-hidden flex-shrink-0">
                  <div className="w-full h-full bg-gradient-to-br from-primary/20 to-primary/10" />
                </div>
                <div className="flex-1">
                  <h3 className="font-medium">漫画标题 {i}</h3>
                  <p className="text-sm text-muted-foreground">第{i * 5}话</p>
                  <p className="text-xs text-muted-foreground">2小时前更新</p>
                </div>
                <button className="text-primary hover:text-primary/80 transition-colors">
                  立即阅读
                </button>
              </div>
            ))}
          </div>
        </section>
      </main>
    </div>
  )
}
